<script setup lang="ts">
import { getUserInfo, updateInfo } from '@/api/user'
import { onMounted, ref } from 'vue'
import { UserInfo } from '@/types'
import { useCounterStore } from '@/stores/modules/user.ts'

const store = useCounterStore()
const user = ref<UserInfo>({})
const onSubmit = async () => {
  updateInfo(user.value)
  store.setUserInfo(user.value)
}
onMounted(async () => {
  user.value = await getUserInfo()
})
</script>
<template>
  <div class="main">
    <div class="profile">
      <span>基本资料</span>
    </div>
    <el-form :model="user" label-width="auto" style="max-width: 600px">
      <el-form-item label="登录名称">
        <el-input disabled v-model="user.username" />
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="user.nickname" />
      </el-form-item>
      <el-form-item label="用户邮箱">
        <el-input v-model="user.email" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.profile{
  margin-bottom: 20px;
}
.main {
  .profile {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--el-border-color);
  }

  .searchForm {
    margin-top: 20px;
    height: 50px;

    .search-select {
      width: 200px;
    }
  }
}
</style>
